<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Title</title>
</head>
<body>
 <div id="app">
   <!-- vue 内部因为驼峰比哦啊哦是问题  :cInfo="cInfo" 是无法传递到子组件的  必须用:c-info="info" -->
    <cpn :cmessage="message" :c-info="info"></cpn>
  </div>

 <template id="cpn">
   <div>
     <h2>{{cmessage}}</h2>
     <h2>{{cInfo}}</h2>
   </div>
 </template>

     <script src="../js/vue.js"></script>
     <script>
       const cpn={
         template: '#cpn',
         props: {
           cmessage:{
             type: String,
             default: ''
           },
           cInfo:{
             type: Object,
             default(){
               return {}
             }
           }
         }

       }
       const app=new Vue({
         el: '#app',
         data: {
           message:'你好vue',
           info: {
             name: 'zhangsan',
             age: 12
           }
         },
         components:{
           cpn
         }
       })
     </script>
</body>
</html>